<template>
	<view class="content">
		<view class="headeruser-image">
			<image src="/static/images/personal.png">
		</view>
		<view class="main-body">
			<view class="main-hander flex-center">
				<view>
					<view class="w100 flex-center">
						<view class="portrait-img">
							<image class="portrait" src="../../static/images/tou.png"></image>
						</view>
					</view>
					<view class="w100 ptop10 flex-center">
						<text class="text-con">{{username}}</text>
					</view>
					<view class="w100 flex-center">
						<text class="text-con">ID:85238444</text>
					</view>
				</view>
			</view>
			<view class="w750 flex-center ptop30">
				<view class="main-body-con">
					<u-cell-group title-bg-color="rgb(243, 244, 246)">
						<u-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list"
							:key="index" isLink :icon="item.iconUrl" @click="showToast(item)">
						</u-cell>
					</u-cell-group>
				</view>
			</view>
			<!-- <view class="ptop30 w750 flex-center">
				<view style="width: 690rpx;">
					<u-button type="primary" text="退出登录" @click="outLogin"></u-button>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: uni.getStorageSync('username'),
				list: [{
						type: 'information',
						title: '基本信息',
						message: "基本信息",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png',
						url: '/pages/information/information'
					},

					/* {
						type: 'success',
						title: '成功主题(带图标)',
						message: "庄生晓梦迷蝴蝶",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
					{
						type: 'loading',
						title: '正在加载',
						message: "正在加载",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
					}, */
					{
						type: 'default',
						title: '上传信息',
						message: "",
						url: '/pages/userlist/userlist',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
					}
				],
			}
		},
		methods: {
			showToast(val) {
				uni.navigateTo({
					url: val.url
				});

			},
			outLogin() {
				uni.removeStorageSync('userId')
				uni.removeStorageSync('token')
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		position: relative;
	}

	.hander-myself {
		width: 750rpx;
		height: 300rpx;
		background-image: linear-gradient(#c0e3f8, #7cbbf8);
	}

	.head-portrait-box {
		width: 160rpx;
		height: 160rpx;
		background-color: #ffffff;
		border-radius: 50%;
		overflow: auto;
	}

	.portrait {
		width: 100%;
		height: 100%;
	}

	.headeruser-image {
		width: 750rpx;
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	.headeruser-image>image {
		width: 100%;
		height: 100%;
	}

	.main-body {
		width: 750rpx;
		height: 100%;
		position: absolute;
		z-index: 1;
	}

	.main-hander {
		width: 750rpx;
		height: 390rpx;
	}

	.portrait-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: auto;
	}

	.portrait {
		width: 100%;
		height: 100%;
	}

	.main-body-con {
		width: 700rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
</style>
